<template>
  <div class="hello">
    <h2>{{person}}</h2>
    <input v-model="person">
  </div>
</template>

<script>
import {ref,customRef} from 'vue'
//vue3中组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
export default {

  name: 'HelloWorld',
  
  setup(){
    let timer;
    function muRef(value){
      return customRef((track,trigger)=>{
          return {
            get(){
              console.log( `有人从myRef这个容器中获取数据,我把${value}的值给他了`)
              track();
              return value
            },
            set(newValue){
              console.log(`有人从myRef这个容器中读取数据改为了${newValue}`)
              value=newValue;
              clearTimeout(timer)
              timer=setTimeout(()=>{
                 trigger()
              },500)
             
            }
          }
      })
    }
  let  person=muRef("zs")
    return {
      person
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
